<template>
	<!-- 弹出层 -->
	<view>
		<uni-popup background-color="#fff" showClose="false" class="popup" ref="popup" type="bottom"
			border-radius="10px 10px 0 0">
			<view class="typelist" v-for="(ty,index) in tylist" :key="ty.name">
				<p @click="sort(ty.name,ty.value,ty.Text)" class="type">{{ty.name}}</p>
			</view>
		</uni-popup>
	</view>
	<div class="container">
		<div class="set_div">
			<!-- 搜索栏 -->
			<input class="set_inupt" v-model="val" type="text" @click="tpseek" placeholder="搜索标题" disabled />
			<!-- 排序和星级筛选 -->
			<div class="filters">
				<view v-for="(filter, index) in filters" :key="filter.value">
					<span class="ss" :class="{ active: activeFilter === filter.value }"
						@click="handleClick(filter, index)">
						{{ filter.label }}
					</span>
				</view>
			</div>
		</div>

		<!-- 家政人员列表 -->
		<div class="staff-list">
			<div @click="jotp(staff.id)" class="staff-item" v-for="staff in staffList" :key="staff.name">
				<div class="medals">
					<div style="float:left;height: 45px;">
						<image :src="url()+staff.imgpath" class="staff-image"></image>
						<div v-if="staff.cls == 2" class="gold">金牌</div>
						<div v-if="staff.cls == 1" class="silver">银牌</div>
					</div>
					<div style="margin-left: 55px;">
						<div class="username">{{ staff.name }}</div>
						<div class="price">￥{{ staff.price }}</div>
						<uni-rate :readonly="true" size="14" max="6" :value="staff.star" />
					</div>
				</div>
				<div class="staff-info">
					<div v-for="tags in staff.tags " :key="tags" class="tags-container">
						<p class="js">{{ tags }}</p>
					</div>
				</div>
				<div class="jzyy_but">
					<button>立即预约</button>
				</div>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		gonavigateTo
	} from '@/request/wx.js'
	import {
		staffsel,
		rank,
		url
	} from '@/request/api.js'
	import {
		onLoad,
		onShow
	}
	from '@dcloudio/uni-app';
	const val = ref('');
	const staffList = ref([]); // 定义家政人员列表的响应式数据
	//搜索跳转获取
	onShow(async () => {
		// 从本地存储中获取名为'result'的数据
		const result = uni.getStorageSync('result');
		val.value = result
		// 检查result是否为非空字符串
		if (typeof result === 'string' && result.trim() !== '') {
			activeFilter.value = "搜索";
			// 构建data对象
			const data = {
				'text': 12,
				'result': result
			};
			// 调用rank函数并等待其完成
			const response = await rank(data);
			show(response); // 显示rank函数的响应结果
		} else {
			console.log('输入为空');
		}
		// 不管result是否为空，都从本地存储中删除'result'数据
		uni.removeStorageSync('result');

		// 输出result的值，用于调试
		console.log(result);
	});

	//家政显示
	onMounted(async () => {
		try {
			const response = await staffsel();
			show(response);
			console.log(staffList.value);
		} catch (error) {
			// 打印捕获到的错误
			console.error("请求失败:", error);
		}
	});

	function show(response) {
		staffList.value = response.data.data; // 假设这里的 data.data 是一个数组

		// 处理每个 staff 的 trait 属性
		staffList.value.forEach(staff => {
			if (staff.trait) {
				staff.tags = staff.trait.split("，").map(tag => tag.trim());
			}
		});

		console.log(staffList.value);
	}

	//跳转搜索页面
	function tpseek() {
		gonavigateTo(`/pages/user/seek/seek?tid=${0}`)
	}
	//跳转详情页面点击事件
	function jotp(id) {
		uni.navigateTo({
			url: `/pages/user/details/details?id=${id}`
		})
	}
	//定义筛选条件的数组
	const filters = ref([{
			label: '排序',
			value: 'sort',
			showUpTriangle: false
		},
		{
			label: '星级',
			value: 'star',
			showUpTriangle: false
		},
		{
			label: '全部',
			value: 'all',
			showUpTriangle: false
		},
		{
			label: '金牌',
			value: 'gold',
			showUpTriangle: false
		},
		{
			label: '银牌',
			value: 'silver',
			showUpTriangle: false
		},
	]);
	const tylist = ref([

	])
	const activeFilter = ref('')
	const popup = ref(null)
	//获取弹出框内容
	async function sort(name, index, text) {
		// 更新当前激活的过滤器
		activeFilter.value = filters.value[index].value;
		filters.value[index].label = name;
		popup.value.close();
		const data = {
			'text': text
		}
		// 调用 rank 函数并等待其完成
		const response = await rank(data);
		show(response)
		// 处理 response
	}
	// 处理点击事件
	async function handleClick(filter, index) {
		val.value = '';
		activeFilter.value = filter.value;
		// 更新过滤器的标签
		filters.value[1].label = '星级'
		filters.value[0].label = '排序'

		switch (filter.value) {
			case 'sort':
				console.log('执行排序逻辑');
				tylist.value = [{
						name: '全部排序',
						value: '0',
						Text: '0'
					},
					{
						name: '星级从高到低',
						value: '0',
						Text: '1'
					},
					{
						name: '星级从低到高',
						value: '0',
						Text: '2'
					},
					{
						name: '价格从高到低',
						value: '0',
						Text: '3'
					},
					{
						name: '价格从低到高',
						value: '0',
						Text: '4'
					}
				];
				popup.value.open()
				// 执行排序逻辑...
				break;
			case 'star':
				console.log('执行星级筛选逻辑');
				tylist.value = [{
						name: '全部星级',
						value: '1',
						Text: '0'
					},
					{
						name: '一星',
						value: '1',
						Text: '5'
					},
					{
						name: '二星',
						value: '1',
						Text: '6'
					},
					{
						name: '三星',
						value: '1',
						Text: '7'
					},
					{
						name: '四星',
						value: '1',
						Text: '8'
					},
					{
						name: '五星',
						value: '1',
						Text: '9'
					},
					{
						name: '六星',
						value: '1',
						Text: '10'
					}
				];
				popup.value.open()
				// 执行星级筛选逻辑...
				break;
			case 'all':
				console.log('显示全部');
				const data = {
					'text': 0
				};
				const response = await rank(data);
				show(response);
				break;
			case 'gold':
				const datas = {
					'text': 10
				};
				const responses = await rank(datas);
				show(responses);
				break;
			case 'silver':
				console.log('显示银牌');
				const datass = {
					'text': 11
				};
				const responsess = await rank(datass);
				show(responsess);
				break;
			default:
				console.log('未识别的筛选条件');
				// 处理未识别的筛选条件...
				break;
		}
	}
</script>

<style scoped>
	.medals {
		width: 100%;
	}

	.set_div {
		padding: 20rpx 40rpx;
		background-color: white;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		/* margin-bottom: 20px; */
	}

	.set_inupt {
		height: 68rpx;
		width: 94%;
		padding-left: 20px;
		border-radius: 16rpx;
		background-color: #efefef;
		margin-bottom: 20px;
	}

	.gold,
	.silver {
		transform: translate(21px, -17px);
		background: linear-gradient(#fddf89, #fef2ce);
		color: #fbbd08;
		border-radius: 2px;
		text-align: center;
		width: 30px;
		font-size: 12px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	.silver {
		background: linear-gradient(#e4e8ea, #e7ebed);
		color: #94a4ad;
	}

	.price {
		color: red;
		font-size: 12px;
		float: right;
		margin-right: 2px;
		margin-top: 3px;
	}

	.tags-container {
		overflow: hidden;
		display: inline-block;
	}

	.popup {
		/* 这里是 uni-popup 的样式 */
		width: 50%;
		/* 弹窗宽度 */
		background-color: #ffffff;
		/* 弹窗背景颜色 */
		/* 其他样式... */
	}

	.typelist {
		/* 这里是 typelist 的样式 */
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		padding: 10px;
		/* 内边距 */
		border-bottom: 1px solid #eee;
		/* 底部边框 */
		/* 其他样式... */
	}

	.typelist:last-child {
		/* 最后一个 typelist 没有底部边框 */
		border-bottom: none;
	}

	.type {
		/* 这里是 type 的样式 */
		font-size: 18px;
		/* 字体大小 */
		color: #333;
		/* 字体颜色 */
		/* 其他样式... */
	}

	.ss {
		margin: 0px 2px;
		padding-bottom: 4px;
		font-size: 16px;
	}

	.ss.active {
		color: #5500ff;
		border-bottom: 3px #5500ff solid;
		font-weight: bold;
		/* 激活时的颜色 */
	}

	.ss:hover {
		color: #5500ff;
		/* 鼠标悬停时的颜色 */
	}

	.filters {
		display: flex;
		gap: 10px;
		margin-bottom: 5px;
	}

	.staff-list {
		display: flex;
		gap: 30rpx;
		width: 100%;
		padding-left: 10px;
	}

	.staff-item {
		margin-top: 30px;
		width: 45%;
		border-radius: 8px;
		box-shadow: 2px 2px 11px 2px rgba(0, 0, 0, 0.1);
	}

	.staff-image {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		margin-left: 4px;
		margin-top: -13px;
	}

	.staff-info {
		padding: 5px;
		padding-top: 0px;
		display: inline-block;
		width: 95%;
	}

	.username {
		font-size: 14px;
		margin-top: 1px;
		margin-bottom: 1px;
		display: inline-block;
		font-weight: bold;
	}

	.js {
		color: #666;
		text-align: center;
		border: 1px solid #ccc;
		padding: 2px 5px;
		border-radius: 3px;
		font-size: 10px;
		margin-right: 4px;
	}

	.jzyy_but button {
		color: white;
		font-size: 12px;
		border-radius: 0px;
		background: linear-gradient(to right, #ad74ff, #8078ff);
		clip-path: inset(0 round 0 0 8px 8px);
	}
</style>